<template>
	<view class="page">
		<!-- <up-navbar title="" @rightClick="{}" :autoBack="true" bgColor = "#fff" placeholder></up-navbar> -->
		<view class="content padding-32 box-sizing ">
	
			<view class="flex  items-center" style="width: 100%; height: 80rpx;">
				<up-input clearable @focus="focus" @clear="clear" @confirm="search" v-model="searchVal"
					:adjustPosition="false" confirmType="search" placeholder="请输入您想查询的单词"
					placeholderClass='placeholder' shape="circle">
					<template #prefix>
						<image src="../../static/search_icon.png" mode="" @click="search"
							style='width: 44rpx; height: 44rpx;'></image>
					</template>

				</up-input>
				<view class="search_btn" @click="search">
					搜索
				</view>
			</view>
			<view class="marginTop-32" v-if="pieShow==false">
				<view class="flex items-center flex-center">
					<image src="../../static/Frame.png" mode="" style="width: 100rpx; height: 100rpx;"></image>
				</view>
				<view class="fontSize-24 color-999 marginTop-16" style="line-height: 28rpx;">
					{{searchList.desc}}
				</view>
			</view>
			<!-- 搜索不到 -->
			<view class="" v-if="searchShow == true" style="margin-top: 250rpx;">
				<view class="flex flex-center items-center">
					<image src="../../static/Group.png" mode="" style="width: 160rpx; height: 160rpx;"></image>
				</view>
				<view class="color-999 fontSize-28 marginTop-40 text-center"
					style="padding-left: 100rpx; padding-right: 100rpx;">
					{{msg}}
				</view>
			</view>
			
			<!-- 搜索成功 -->
			<!-- 描述 -->
			<view class="" v-else>
			

				<!-- 图表 -->
				<view class="width-full chart-section marginTop-46" v-if="pieShow == true">
					<view class="fontSize-30 color-333 weight-700">
						搜索统计
					</view>
					<view class="title">
						<view class="line"> </view>
						<view class="fontSize-24 weight-500">
							{{searchList.onetitle}}
						</view>
					</view>
					<view class="chart-block" style="width: 100%; height: 400rpx">
						<qiun-data-charts type="pie" :opts="opts" :chartData="chartData" :canvas2d="true"
							canvasId="ULODRXjgrKWzPKwOAATtfQOllomFNqky" @getIndex="getIndex" :tapLegend="false" />
					</view>
					<view class="title">
						<view class="line"> </view>
						<view class="fontSize-24 weight-500">
							{{searchList.twotitle}}
						</view>
					</view>
					<view class="chart-block" style="width: 100%; height: 400rpx">
						<qiun-data-charts type="pie" :opts="opts" :chartData="chartData2" :canvas2d="true"
							canvasId="grucOhhNcoXbaukjHQevyENszpPLUoqp" @getIndex="getIndex2" :tapLegend="false" />
					</view>
				</view>

			</view>




		</view>
		<up-popup :show="errorShow" mode='center' bgColor='transparent'>
			<view class="popup_bg">
				<view class="color-white fontSize-52 text-center marginTop-25">
					温馨提示
				</view>
				<view class="text-center marginTop-100 fontSize-36 color-333">
					{{errorMsg}}
				</view>
				<view class="btn" @click="backIndex">
					退出
				</view>

			</view>
		</up-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import uCharts from "@/node_modules/@qiun/ucharts/u-charts.js";
	const searchApi = inject('seachWord');
	const insertUnWordApi = inject('insertUnWord');
	const seachWordIndexApi = inject('seachWordIndex');
	const seachWordMethodApi = inject('seachWordMethod');
	const searchVal = ref('');
	const searchList = ref({});
	const pieList1 = ref([]);
	const pieList2 = ref([]);
	const starShow = ref(false);
	const pieShow = ref(false);
	const searchShow = ref(false);
	const errorShow = ref(false);
	const msg = ref('')
	const errorMsg = ref('')

	const timer = ref({
		t1: '',
		t2: ''
	});
	const chartData = ref({});
	const chartData2 = ref({});
	const wordInfo = ref({});
	const opts = ref({
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [5, 5, 5, 5],
		enableScroll: false,

		extra: {
	
			pie: {
				activeOpacity: 0.5,
				activeRadius: 10,
				offsetAngle: 0,
				labelWidth: 15,
				border: false,
				borderWidth: 3,
				borderColor: "#FFFFFF"
			}
		}
	});

	onLoad(() => {
		seachWordIndexApi().then(res => {
			if (res.status == 201) {
				errorMsg.value = res.remind
				setTimeout(() => {
					errorShow.value = true
				}, 500)
			} else {
				searchList.value = res

				pieList1.value = res.oneTotal
				pieList1.value = pieList1.value.map(item => {
					if (item.value == 0) {
						item.labelShow = false
					} else {
						const totalValue = pieList1.value.reduce((acc, cur) => acc + cur.value, 0);
						const percentage = ((item.value / totalValue) * 100).toFixed(2) + '%';
						item.labelText = `${item.value}次\n(${percentage})`;
					}
					return item;
				});
				pieList2.value = res.twoTotal
				pieList2.value = pieList2.value.map(item => {
					if (item.value == 0) {
						item.labelShow = false
					} else {
						const totalValue = pieList2.value.reduce((acc, cur) => acc + cur.value, 0);
						const percentage = ((item.value / totalValue) * 100).toFixed(2) + '%';
						item.labelText = `${item.value}个\n(${percentage})`;
					}
					return item;
				});
				if (pieList1.value.length > 0 || pieList2.value.length) {
					pieShow.value = true
					console.log(6666666666666)
					getServerData();
				}
			}
		})
	});
	const handlePieChartElementClick = (event) => {
		console.log('饼图元素被点击了', event);
		const clickedElement = event.detail;

	};
	const getServerData = () => {
		console.log('pieList1.value', pieList1.value)
		console.log('pieList2.value', pieList2.value)
		let res = {
			series: [{
				data: pieList1.value,
				itemStyle: {
					normal: {
						// 绑定点击事件处理函数
						onClick: handlePieChartElementClick
					}
				},
				label: {

					show: true,
					normal: {
						formatter: "{b}:\n{c}\n{d}%", //百分比之后换行显示文字
						color: '#555'
					},

				}
			}]
		};
		let res2 = {
			series: [{
				data: pieList2.value,

			}]
		};
		chartData.value = JSON.parse(JSON.stringify(res));
		chartData2.value = JSON.parse(JSON.stringify(res2));

	};

	const innerAudioContext = uni.createInnerAudioContext();
	innerAudioContext.autoplay = false;

	innerAudioContext.onCanplay(() => {
		console.log('可以播放l ');
		// setTimeout(() => { 
		// console.log('开始播放');
		// innerAudioContext.play()
		// }, 1000)
	});
	innerAudioContext.onPlay((e) => {

		console.log('音频播放事件', e);
	})
	innerAudioContext.onEnded((e) => {

		// _this.voiceLoading = false
		console.log('音频自然播放结束事件', e);
	})
	const clearTime = () => {
		clearTimeout(timer.value.t1);
		clearTimeout(timer.value.t2);
	}
	onUnload(() => {
		clearTime();
	})
	const play = (it = {
		wordHead: searchVal.value
	}) => {
		clearTime();
		innerAudioContext.stop();
		innerAudioContext.src = `https://dict.youdao.com/dictvoice?audio=${it.wordHead}&type=1`;
		innerAudioContext.play();
		timer.value.t1 = setTimeout(() => {
			innerAudioContext.stop();
			innerAudioContext.src = `https://dict.youdao.com/dictvoice?audio=${it.wordHead}&type=1`;
			innerAudioContext.play();
		}, 2000);
		timer.value.t2 = setTimeout(() => {
			innerAudioContext.stop();
			innerAudioContext.src = `https://dict.youdao.com/dictvoice?audio=${it.wordHead}&type=1`;
			innerAudioContext.play();
		}, 4000);
	}
	const focus = () => {
		clearTime();
	}
	const search = () => {
		seachWordMethodApi({
			word: searchVal.value
		}).then(res => {
			console.log(res)
			wordInfo.value = res.wordInfo
			if (res.status == 201) {
				console.log('201201', res.status)
				searchShow.value = true
				msg.value = res.remind

			} else {
				uni.navigateTo({
					url: '/pages/index/searchWord?type=' + res.wordInfo.type + '&page=' + res
						.wordInfo
						.page + '&keyword=' + searchVal.value + '&wordId=' + res.wordInfo.wordId
				
				})

			}



		})

	}
	const clear = () => {
		starShow.value = false
		searchVal.value = '';
		searchList.value = [];
		clearTime();
	}
	const insertUnWord = () => {
		insertUnWordApi({
			wordId: searchList.value.wordId
		}).then(res => {
			console.log(res)
		})
	}
	const star = (val) => {
		if (starShow.value) return
		starShow.value = val
		insertUnWord()
	}
	const returnVal = (val) => {
		let valList = val.split('<br>');
		let text = ''
		for (let s of valList) {
			text = `
				${text}
				${s}
			`
		}
		return valList
	}

	// const toList = (index) => {
	// 	//index=1跳转生词熟词 index=2跳转次数
	// 	uni.navigateTo({
	// 		url: '/pages/index/test/historyList?index=' + index
	// 	})

	// }

	//1-生词，2-熟词，3-模糊词，4-后补词，5-一次搜索，6-二次搜索，7-三次以上搜索
	const Wordtype = ref(0)

	const getIndex = (e) => {
		console.log(e)
		
		Wordtype.value = e.legendIndex + 1
		if(e.currentIndex!=-1){
			uni.navigateTo({
				url: '/pages/index/historyList?type=' + Wordtype.value + '&id=' + e.id +'&currentIndex='+e.currentIndex
			})
		}else{
			uni.navigateTo({
				url: '/pages/index/historyList?type=' + Wordtype.value + '&id=' + e.id +'&currentIndex='+e.legendIndex
			})
		}
	}
	const getIndex2 = (e) => {
		console.log(e)
		Wordtype.value = e.legendIndex + 5
		if(e.currentIndex!=-1){
			uni.navigateTo({
				url: '/pages/index/historyList?type=' + Wordtype.value + '&id=' + e.id +'&currentIndex='+e.currentIndex
			})
		}else{
			uni.navigateTo({
				url: '/pages/index/historyList?type=' + Wordtype.value + '&id=' + e.id +'&currentIndex='+e.legendIndex
			})
		}


	}
	const backIndex = () => {
		uni.navigateBack()
	}
</script>
<style lang="scss" scoped>
	::v-deep .placeholder {
		font-size: 28rpx;
		color: #999;
	}

	::v-deep .u-input.u-border.u-radius.u-square {
		border-radius: 22rpx;
		background: #F5F5F5;
	}

	.chart-section {
		padding: 32rpx;
		background: linear-gradient(180deg, rgba(81, 213, 128, 0.2) 0%, rgba(81, 213, 128, 0.1) 38%, rgba(81, 213, 128, 0.05) 76%, rgba(81, 213, 128, 0.02) 100%);
		border-radius: 30rpx;
		box-sizing: border-box;
	}

	.title {
		display: flex;
		align-items: center;
		margin-top: 30rpx;

		.line {
			width: 6rpx;
			height: 22rpx;
			background-color: #4ed27d;
			border-radius: 66rpx;
			margin-right: 8rpx;
		}
	}

	.popup_bg {
		width: 610rpx;
		height: 500rpx;
		background: url('https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/remind.png') no-repeat;
		background-size: 100% 100%;
		overflow: hidden;
		z-index: 99999999999999999;
		padding: 0 50rpx;
		box-sizing: border-box;

		.btn {
			width: 252rpx;
			height: 92rpx;
			background: #4ed27d;
			border-radius: 74rpx;
			text-align: center;
			line-height: 93rpx;
			color: #fff;
			margin: 0 auto;
			margin-top: 50rpx;
		}

	}
	.search_btn{
		width: 144rpx;
		height: 80rpx;
		background: #51D580;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		text-align: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		line-height: 80rpx;
	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>